<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" ref="filterRef" size="mini" class="form-filter">
            <el-row>
                <el-col :span="18">
                    <el-form-item label="车型" prop="vehicleTypeId">
                        <el-select
                            v-model="filter.vehicleTypeId"
                            filterable
                            clearable
                            @change="getPage()"
                        >
                            <el-option
                                v-for="item in vehicleTypeOptions"
                                :key="item.id"
                                :label="item.vehicleTypeName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="车牌号" prop="licensePlateNumber">
                        <el-input v-model="filter.licensePlateNumber" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                        <el-button @click="resetFilter" icon="el-icon-refresh-left">重置</el-button>
                        <el-button @click="showUpdate({})" icon="el-icon-plus">添加</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="text-align: right;">
                    <el-button @click="$router.push('/vehicle/vehicleBrand')" icon="el-icon-s-shop">品牌管理</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-content">
            <el-table v-loading="loading" style="width: 100%" :data="page.records" border stripe
                :cell-class-name="getCellIndex" @cell-click="tableDbEdit" :header-cell-style="headerCellStyle">
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + (page.current - 1) * page.size + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="licensePlateNumber" label="车牌号" />
                <el-table-column prop="vehicleTypeName" label="车型" width="180px" />
                <el-table-column prop="brandName" label="品牌" />
                <el-table-column prop="vehicleImage" label="车辆图片" width="180px" >
                    <template #default="scope">
                        <el-image v-for="item in scope.row.vehicleImage" :src="item.url" style="width: 40px; height: 40px"
                                    :preview-src-list="[item.url]"
                                  fit="cover">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="drivingLicenseImage" label="行驶证图片" width="180px">
                    <template #default="scope">
                        <el-image v-for="item in scope.row.drivingLicenseImage" style="width: 40px; height: 40px" :src="item.url"
                                  :preview-src-list="[item.url]"
                                  fit="cover">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="size" label="尺寸" />
                <el-table-column prop="color" label="颜色" />
                <el-table-column prop="energyName" label="能源类型" />
                <el-table-column prop="remark" label="备注" />

                <el-table-column width="70" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" @change="statusSwitch(scope.row.status,scope.row.id)" />
                    </template>
                </el-table-column>

                <el-table-column width="80" prop="updateName" label="更新人" />
                <el-table-column width="160" prop="updateTime" label="更新时间" />

                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button size="mini" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row)">编辑
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin:0 0px 10px 10px;">删除
                            </el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background :current-page="page.current" :page-sizes="[10, 20, 30, 50,100]" :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total" style="margin-top:20px;"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            <Update ref="updateRef" @refresh="getPage()" />
        </div>
    </section>
</template>
<script>
    import { VehicleApi } from '@/api/user/VehicleApi'
    import { VehicleBrandApi } from '@/api/user/VehicleBrandApi'
    import { VehicleTypeApi } from '@/api/user/VehicleTypeApi'
    import Update from './update.vue'

    export default {
        name: 'vehicle',
        components: {
            Update
        },
        data() {
            return {
                page: {
                    total: 0,
                    size: 10,
                    current: 1,
                    pages: 0,
                    records: []
                },
                filter: {
                    vehicleTypeId: '',
                    licensePlateNumber: ''
                },
                coordinate: {
                    column: -1,
                    row: -1
                },
                loading: false,
                headerCellStyle: {
                    "background-color": "#F2F5FC"
                },
                vehicleTypeOptions:[],
                vehicleBrandOptions:[]
            }
        },
        created() {
            this.getPage()
            this.getVehicleTypeOptions()
        },
        methods: {
            // 获取用户列表
            getPage() {
                const params = Object.assign({}, this.filter);
                params['pageIndex'] = this.page.current
                params['pageSize'] = this.page.size

                this.loading = true
                VehicleApi.getPage(params).then((response) => {
                    this.page = response
                    this.loading = false
                }).catch((err) => {
                    this.loading = false
                })
            },
            getVehicleTypeOptions() {
                VehicleTypeApi.getList([]).then((response) => {
                    this.vehicleTypeOptions = response
                })
            },

            // 删除数据
            handleDelete(id) {
                VehicleApi.delete(id).then((response) => {
                    this.getPage()
                })
            },

            handleSizeChange(val) {
                this.page.size = val
                this.page.current = 1
                this.getPage()
            },

            handleCurrentChange(val) {
                this.page.current = val
                this.getPage()
            },

            showUpdate(data) {
                this.$refs['updateRef'].show(data)
            },

            // 修改状态
            statusSwitch(val, id) {
                const params = {
                    id: id,
                    status: val
                }

                VehicleApi.edit(params).then((response) => {})
            },
            // 修改排序
            submitTableEdit(row) {
                this.coordinate.column = -1
                this.coordinate.row = -1
                const params = {
                    id: row.id,
                    sort: row.sort
                }
                VehicleApi.edit(params).then((response) => {})
            },
            getCellIndex({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                row.index = rowIndex
                column.index = columnIndex
            },
            tableDbEdit(row, column) {
                this.coordinate.row = row.index
                this.coordinate.column = column.index
            },
            resetFilter(formName) {
                this.$refs['filterRef'].resetFields()
                this.getPage()
            }
        }
    }
</script>

<style lang="scss" scoped></style>
